<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>22001010205白博文-首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/tabbar.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
         .t-title {
            width: 100%;
            height: 32px;
            display: flex;
            justify-content: space-evenly;
        }

        .t-title span {
            display: inline-block;
            width: 20%;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
        }

        .t-title .cur {
            color: #e02e24;
            font-weight: bold;
            border-bottom: 2px solid #e02e24;
        }

        .tc {
            border-top: none;
            font-size: 18px;
            display: none;
            line-height: 24px;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="bai_header">
        <div class="bai_header_search">
            <span class="iconfont icon-sousuo"></span>
            <input class="bai_header_search_input" type="text" placeholder="错过了双11，可别错过了双12大促销">
        </div>
    </div>
    <div>
        <div class="tab">
            <div class="t-title">
                <span>推荐</span>
                <span class="cur">双12低价！</span>
                <span>手机</span>
                <span>食品</span>
            </div>
            <div class="tc">
                <div class="bai_recommend">
                    <div class="bai_recommend_header">
                        <span class="bai_recommend_header_title">拼小圈</span>
                        <span class="bai_recommend_header_text">查看好友动态 ></span>
                    </div>
                    <div class="bai_recommend_nav">
                        <div class="bai_recommend_nav_bag">
                            <div class="bai_recommend_nav_bag_content">
                                <span class="bai_recommend_nav_bag_content_title">新人专享 仅限一份</span>
                                <span class="bai_recommend_nav_bag_content_text">14:43.7后失效</span>
                            </div>
                            <div class="bai_recommend_nav_bag_button">
                                确认收下
                            </div>
                        </div>
                    </div>
                    <div class="bai_goods1"></div>
                    <div style="height: 60px;"></div>
                </div>
            </div>

            <div class="tc show">
                <div class="bai_goods2"></div>
                <div style="height: 60px;"></div>
            </div>
            <div class="tc">
                <div class="bai_goods3"></div>
                <div style="height: 60px;"></div>
            </div>

            <div class="tc">
                <div class="bai_goods4"></div>
                <div style="height: 60px;"></div>
            </div>
        </div>
    </div>
    <div class="bai-tabbar">
        <a href="./index.html">
            <section class="bai-tabbar-item" style="color: #e3685c;">
                <span class="iconfont icon-shouye"></span>
                <span class="bai-tabbar-item-text">首页</span>
            </section>
        </a>
        <a href="./12.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-1212"></span>
                <span class="bai-tabbar-item-text">12.12</span>
            </section>
        </a>
        <a href="./liaotian.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-chat"></span>
                <span class="bai-tabbar-item-text">聊天</span>
            </section>
        </a>
        <a href="./wode.html">
            <section class="bai-tabbar-item" >
                <span class="iconfont icon-gerenzhongxin-zhihui"></span>
                <span class="bai-tabbar-item-text">我的</span>
            </section>
        </a>
    </div>
    <script>
        var tab = document.querySelector(".tab");
        var tt = tab.querySelector(".t-title");
        var spans = tt.querySelectorAll("span");//返回一组对象
        var tcs = tab.querySelectorAll(".tc");//五个对象
        for (var i = 0; i < spans.length; ++i) {
            spans[i].index = i;
            spans[i].onmouseover = function () {
                for (var j = 0; j < tcs.length; ++j) {
                    tcs[j].style.display = "none";
                    spans[j].className = "";
                }
                this.className += "cur";
                tcs[this.index].style.display = "block";
            }
        }

        const url1 = 'http://localhost:3000/goods4';
        const url2 = 'http://localhost:3000/goods5';
        const url3 = 'http://localhost:3000/phone';
        const url4 = 'http://localhost:3000/food';
        const goods1 = document.querySelector('.bai_goods1');
        const goods2 = document.querySelector('.bai_goods2');
        const goods3 = document.querySelector('.bai_goods3');
        const goods4 = document.querySelector('.bai_goods4');
        const renderHtml = (dom,data) => {
            
            dom.innerHTML = data.map((item)=>{
            return(
                `
                 <div class="bai_goods_item">
            <img src=${item.img} class="bai_goods_item_img"/>
            <p class="bai_goods_item_title">${item.title}</p>
            <div class="bai_goods_item_content">
                <span class="bai_goods_item_content_price">¥${item.price}</span>
                <span class="bai_goods_item_content_quantity">已售${item.quantity}件</span>
            </div>
        </div>
                `
            );
        }).join("");
    }
     const getData = async (dom,url) =>{
        let resp = await fetch(url);
        let result = await resp.json();
        renderHtml(dom,result);
        
    }
    getData(goods1,url1);
    getData(goods2,url2);
    getData(goods3,url3);
    getData(goods4,url4);
    </script>
</body>
</html>